<script setup lang="ts">
//左边
import { ref, onMounted } from "vue";
import Block from "@/components/home/left/block.vue";
import {
  dataLocal,
  addActive,
  toggleAccordion,
  readLocal,
  modify,
} from "@/store/store";
//准备链接数据
const data = dataLocal.menu;

//处理后的响应式数组
const arrActive = ref(addActive(data));

//从浏览器中取得初始值
onMounted(() => {
  //拿到存储值
  const menuID = readLocal()[0];
  //修改状态
  modify(arrActive.value, menuID);
});
</script>

<template>
  <div class="h-full">
    <div class="bg-header border flex justify-between items-center h-15">
      <h1 class="ml-6 text-base text-slate-700 font-semibold">菜单</h1>
    </div>
    <div class="overflow-hidden overflow-y-auto border-x tree-content">
      <Block
        v-for="(item, index) in arrActive"
        :key="item.id"
        :data="item"
        @click="toggleAccordion(arrActive, index)"
      />
    </div>
  </div>
</template>

<style scoped lang="less"></style>
